<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<style>
		#app{
		perspective: 500px;
		position: relative;
		}
		.box{
			width: 200px;
			height: 200px;
			margin: 100px auto;
			position : relative;
			transform: rotateX(360deg);
			transition: 2.5s;
			transform-style: preserve-3d;
			transform-origin: center center 100px;
		}
		.box div{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left:0;
			opacity: .4;
			
		}
		.back{
			background-color: aqua;
		}
		.left{
			background-color: beige;
			transform: rotateY(-90deg);
			transform-origin: left;
		}
		.right{
			background-color: blueviolet;
			transform: rotateY(90deg);
			transform-origin: right;
		}
		.up{
			background-color: chartreuse;
			transform: rotateX(90deg);
			transform-origin: top;
		}
		.pu{
			background-color: cyan;
			transform: rotateX(-90deg);
			transform-origin: bottom;
		}
		.front{
			background-color: deeppink;
			transform: translateZ(200px);
			transform-origin:left;
		}
		.tg{
			position: absolute;
			bottom: -150px;
			left: 20px;
			padding: 10px 30px;
			background-color:#492;
			color: white;
			border: none;
			cursor: pointer;
			
		}
	</style>
	<body>
		<div id="app">
			<div class="box">
				<div class="back"></div>
				<div class="left"></div>
				<div class="right"></div>
				<div class="up"></div>
				<div class="pu"></div>
				<div class="front"></div>
				
			</div>
			<button class="tg" @click="rotateCube">转一圈</button>
		</div>
		<script>
			
			        const app = Vue.createApp({
			            data() {
			                return {
			                    rotation: 0
			                };
			            },
			            methods: {
			                rotateCube() {
			                    this.rotation += 360;
			                    const box = document.querySelector('.box');
			                    box.style.transform = `rotateX(${this.rotation}deg)`;
			                }
			            }
			        });
			        app.mount('#app');
			    
		</script>
	</body>
</html>